import React from 'react';
import { observer } from 'mobx-react-lite';

import Connect from './Connect.tsx';
import Languge from './Languge.tsx';
import More from './More.tsx';

interface NavbarProps {
  className?: string;
  showExplore?: boolean;
}

const Navbar: React.FC<NavbarProps> = observer(function Navbar({
  showExplore = true,
}) {
  return (
    <div className="flex items-center justify-between text-white px-4 py-4 bg-primary">
      <div className="w-[200px] h-[32px] xs:w-[220px] xs:h-[36px] sm:w-[280px] sm:h-[45px] md:w-[350px] md:h-[56px] object-contain">
        <img
          src="./home/logo.png"
          alt="logo"
          className="w-full h-full object-contain"
        />
      </div>

      {showExplore && (
        <div className="hidden md:flex w-[250px] h-[32px] xs:w-[280px] xs:h-[36px] md:w-[380px] md:h-[46px] lg:w-[430px] lg:h-[52px] object-contain">
          <img
            src="./home/Tabbar.png"
            alt="logo"
            className="w-full h-full object-contain"
          />
        </div>
      )}

      {/* 语言切换 */}
      <div className="hidden md:flex items-center">
        <Connect />
        <Languge />
        <div className="w-[12px] h-[12px] md:w-[18px] md:h-[18px] lg:w-[24px] lg:h-[24px] object-contain">
          <img
            src="./home/ear.png"
            alt="logo"
            className="w-full h-full object-contain"
          />
        </div>
      </div>

      <More cls="md:hidden relative" />

      {/* 移动端语言选择器 */}
      {/* <div className="sm:hidden relative">
          <select
            value={i18n.language}
            onChange={(e) => handleLanguageChange(e.target.value as 'en' | 'zh')}
            className="appearance-none bg-transparent text-white border border-white/30 rounded px-3 py-1 pr-8 focus:outline-none focus:ring-2 focus:ring-white/50"
          >
            <option value="en">EN</option>
            <option value="zh">中文</option>
          </select>
          <svg className="absolute right-2 top-1/2 transform -translate-y-1/2 h-4 w-4 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
        </div> */}
    </div>
  );
});

export default Navbar;
